// Todos案例
import React from 'react'
import './css/base.css'
import './css/index.css'
import Header from './components/Header'
import MainList from './components/MainList'
import Footer from './components/Footer'

export default class Todos extends React.Component {
  state = {
    // 任务列表数据
    list: [
      { id: 1, title: '吃饭', done: false },
      { id: 2, title: '睡觉', done: false },
      { id: 3, title: '打豆豆', done: false },
    ],
    // 筛选条件
    type: 'all',
  }

  render() {
    // 结构出列表数据
    const { list, type } = this.state

    return (
      <section className="todoapp">
        {/* 顶部内容 */}
        <Header addTodo={this.addTodo} />
        {/* 中间列表 */}
        <MainList
          handleEdited={this.handleEdited}
          toggleAll={this.toggleAll}
          toggleItem={this.toggleItem}
          delTodoById={this.delTodoById}
          list={list}
          type={type}
        />
        {/* 底部内容 */}
        <Footer
          handleFilter={this.handleFilter}
          type={type}
          list={list}
          clearTask={this.clearTask}
        />
      </section>
    )
  }
  // 完成编辑
  handleEdited = (info) => {
    const newList = this.state.list.map((item) => {
      if (item.id === info.id) {
        // 需要编辑的数据
        return info
      } else {
        // 不需要编辑的数据
        return item
      }
    })
    this.setState({
      list: newList,
    })
  }
  // 控制全选的切换
  toggleAll = (isAll) => {
    console.log(isAll)
    const newList = this.state.list.map((item) => {
      return {
        ...item,
        done: !isAll,
      }
    })
    this.setState({
      list: newList,
    })
  }
  // 更新筛选条件
  handleFilter = (type) => {
    this.setState({
      type: type,
    })
  }
  // 清除已经完成任务
  clearTask = () => {
    // 获取剩余的没有完成的任务
    const newList = this.state.list.filter((item) => !item.done)
    this.setState({
      list: newList,
    })
  }
  // 控制单个任务的切换
  toggleItem = (id) => {
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        // 点击的任务状态取反
        return {
          ...item,
          done: !item.done,
        }
      } else {
        // 没有点击的任务状态不变
        return item
      }
    })
    this.setState({
      list: newList,
    })
  }
  // 删除任务
  delTodoById = (id) => {
    // 不要影响原始的数据，而是生成新的数据，覆盖默认数据
    const newList = this.state.list.filter((item) => item.id !== id)
    this.setState({
      list: newList,
    })
  }
  // 添加任务
  addTodo = (title) => {
    // 准备待添加的任务信息
    const todo = {
      id: +new Date(),
      title: title,
      done: false,
    }
    // 把任务信息添加到列表中
    this.setState((preState) => {
      // 注意：React更新数据的原则：不修改原始的数据，而是产生一份新的数据，去覆盖原来的数据
      // 数据的更新，必须手动调用setState方法，不可以直接操作状态数据
      const newList = [todo, ...preState.list]
      return {
        list: newList,
      }
    })
  }
}
